@require '../../variables'
@require '~styles-lib/mixins'

.devlog-post-media
	margin-top: $-item-padding-xs-v
	position: relative

	@media $media-sm-up
		margin-top: $-item-padding-v

.-container
	display: block
	overflow: hidden
	margin-left: -($-item-padding-xs)
	margin-right: -($-item-padding-xs)

	@media $media-sm-up
		margin-left: -($-item-padding-container)
		margin-right: -($-item-padding-container)

.-slider
	white-space: nowrap
	transition: transform 300ms $strong-ease-out

.-prev, .-next
	change-bg('bg-subtle')
	theme-prop('color', 'fg')
	display: none
	position: absolute
	top: 50%
	height: 80px
	width: $grid-gutter-width * 0.75
	line-height: @height
	margin-top: -(@height / 2)
	text-align: center
	z-index: 2
	user-select: none

	&:hover
		theme-prop('color', 'link')

	@media $media-sm-up
		display: block

.-prev
	left: -($-item-padding-container + $grid-gutter-width * 0.75 + $-border-width)
	border-top-left-radius: $border-radius-large
	border-bottom-left-radius: $border-radius-large

.-next
	right: -($-item-padding-container + $grid-gutter-width * 0.75 + $-border-width)
	border-top-right-radius: $border-radius-large
	border-bottom-right-radius: $border-radius-large

.-indicator
	margin-top: 10px
